<template>
	<div class="selected">
		<div class="selected-top">
			<img src="../../../../public/img/user/left.png" >
			<label>精选推荐</label>
			<img src="../../../../public/img/user/right.png" >
		</div>
		<div class="waterlist">
			<ul>
				<li @click="getInfo(item.pid)" v-for="item in arr" :key='item.pid' >
					<router-link to="" >
						<div :class="['column-top',{'column-top-default':item.marketingList[0]}]">
							<img :src="item.img" >
							<p>{{item.productType}} | {{item.place_label}}</p>
							<template v-if="item.marketingList[0]">
								<h4>{{item.marketingList[0]}}</h4>
							</template>
						</div>
						<p class="ptxt">{{item.title}}</p>
						<div class="column-buttom">
							<div class="buttom-type">
								{{item.name}}
							</div>
							<div class="buttom-text">
								
								<label :class="{'default':item.minprice==='预报名'}"><em v-if="item.minprice!='预报名'">￥</em>{{item.minprice}}<em v-if="item.minprice!='预报名'">起</em></label>
								<span>{{item.days}}</span>
							</div>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Selected',
		data(){
			return{
				arr:[]
			}
		},
		created() {
			this.axios.get('https://m.youxiake.com/api/m/product/lines/recommend/user').then((res)=>{
				this.arr=res.data.data.products
			}).catch((error)=>{
				console.log(error);
			})
		},
		methods:{
			getInfo(id){
				this.$router.push({path:'/info',query:{pid:id}})
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.selected{
		margin-top: 0.5rem;
	}
	.selected-top{
		width: 100%;
		text-align: center;
		margin-bottom: 0.3rem;
	}
	.selected-top label{
		font-size: 0.5rem;
		font-weight: bold;
		margin: 0 0.2rem;
	}
	.selected-top img{
		width: 0.8rem;
	}
	.waterlist{
		padding-bottom: 0.2rem;
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.waterlist ul {
		width: 100%;
	}
	.waterlist ul li{
		float: left;
		background-color: white;
		margin-top: 0.2rem;
		width: 49%;
		height: 6.2rem;
		border-radius: 0.2rem;
		overflow: hidden;
		margin-bottom: 0.2rem;
	}
	.waterlist ul li:nth-child(even){
		float: right;
	}
	.waterlist .column-top{
		position: relative;
		width: 4.8rem;
		height: 4rem;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		border-radius: 0.3rem;
		overflow: hidden;
	}
	.column-top-default{
		border: 2px solid #ff0000;
	}
	.waterlist .column-top p{
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		padding: 0.1rem 0.2rem;
		color: 0.2rem;
		border-radius: 0 0 0.3rem  0;
		background: rgba(0,0,0,0.6);
		white-space: nowrap;/*内容超宽后禁止换行显示*/
		overflow: hidden;/*超出部分隐藏*/
		text-overflow:ellipsis;/*文字超出部分以省略号显示*/
	}
	.column-top h4{
		margin: 0;
		position: absolute;
		bottom: 0;
		right: 0;
		color: white;
		line-height: 0.7rem;
		border-radius: 0.3rem 0 0 0;
		padding: 0.1rem 0.2rem;
		color: 0.2rem;
		background-image: linear-gradient(to right,#ff8a00, #fe5600);
		white-space: nowrap;/*内容超宽后禁止换行显示*/
		overflow: hidden;/*超出部分隐藏*/
		text-overflow:ellipsis;/*文字超出部分以省略号显示*/
	}
	.column-top img{
		width: 100%;
		height: 4rem;
	}
	.waterlist ul li .ptxt{
		font-weight: bold;
		font-size: 0.37rem;
		/* 多行文字做省略号：最后一行文字超过高度，移除隐藏且用省略号替代 */
		overflow: hidden;
		display: -webkit-box; /* 转为盒子 */
		-webkit-line-clamp: 2;/* 与高度有关 */
		/* 超出盒子的范围用省略号代替 */
		-webkit-box-orient: vertical;
		padding: 0.3rem 0.2rem 0 0.2rem;
		margin-bottom: 0.2rem;
	}
	.column-buttom{
		width: 100%;
	}
	.buttom-type{
		width: 95%;
		margin:  0 auto;
		display: flex;
		/* 多行文字做省略号：最后一行文字超过高度，移除隐藏且用省略号替代 */
		overflow: hidden;
		display: -webkit-box; /* 转为盒子 */
		-webkit-line-clamp: 2;/* 与高度有关 */
		/* 超出盒子的范围用省略号代替 */
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		font-weight: bold;
	}
	.buttom-text{
		width: 93%;
		margin:  0 auto;
		display: flex;
		justify-content: space-between;
		align-content: center;
		line-height: 1rem;
		font-size: 0.3rem;
	}
	.buttom-text label{
		font-weight: bold;
		font-size: 0.43rem;
		color: #ff7100;
	}
	.buttom-text label em{
		font-size: 0.3rem;
	}
	.buttom-text span{
		color: #999;
	}
	.default{
		font-weight: normal !important;
		font-size: 0.3rem !important;
	}
</style>
